import { Button, message } from 'antd';

import { PlusOutlined } from '@ant-design/icons';
import { BetaSchemaForm, ProFormInstance } from '@ant-design/pro-form';
import React, { useRef, useState } from 'react';
import { history } from 'umi';

import MyIcon from '@/components/MyIcon';
import MyTable from '@/components/MyTable';
import { editBanks, findByBanksPageList } from '@/services/banks';

const columnDialog = [
  {
    title: '基本信息',
    valueType: 'group',
    columns: [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        initialValues: 0,
        hideInForm: true,
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        width: 'md',
      },
      {
        title: '名称',
        dataIndex: 'nameUg',
        key: 'nameUg',
        width: 'md',
      },
      {
        title: '关键字',
        dataIndex: 'shortKey',
        width: 'md',
      },
      {
        title: '颜色',
        dataIndex: 'color',
        valueType: 'color',
        width: 'md',
      },
      {
        title: '图标',
        dataIndex: 'icon',
        width: 'md',
      },
    ],
  },
];

const cloneTbale = () => {
  const formRef = useRef<ProFormInstance>();
  const column = [
    {
      title: '编号',
      dataIndex: 'index',
      key: 'index',
      valueType: 'indexBorder',
    },
    {
      title: '图标',
      dataIndex: 'icon',
      valueType: 'icon',
      render: (_: any, row: { color: string | undefined; icon: string }) => {
        return (
          <MyIcon
            style={{ color: row.color, fontSize: 30 + 'px' }}
            color={row.color}
            type={row?.icon}
          />
        );
      },
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 'md',
    },
    {
      title: '名称',
      dataIndex: 'nameUg',
      key: 'nameUg',
      width: 'md',
    },
    {
      title: '关键字',
      dataIndex: 'shortKey',
      width: 'md',
    },
    {
      title: '颜色',
      dataIndex: 'color',
      valueType: 'color',
    },

    {
      title: '操作',
      width: '164px',
      key: 'option',
      valueType: 'option',
      render: (_: any, row: any, index: any, action: any) => [
        <a
          key="link"
          onClick={(a) => {
            console.log(row);
            editDialogInfo(row, index);
          }}
        >
          编辑
        </a>,
        <a
          key="link"
          onClick={(a) => {
            console.log(row);
            history.push({
              pathname: 'attr/values',
              query: row,
            });
          }}
        >
          详细
        </a>,
      ],
    },
  ];
  const [editDialg, setEditDialg] = React.useState(false);
  const [banks, setBanks] = useState<API.Banks>();

  function editDialogInfo(row, index) {
    setBanks(row);
    formRef?.current?.setFieldsValue(row);
    setEditDialg(true);
  }

  function hideEditDialg() {
    setBanks({ id: 0 });
    formRef.current?.resetFields();
    setEditDialg(false);
  }

  function openEditDialg() {
    setBanks({ id: 0 });
    formRef.current?.resetFields();
    setEditDialg(true);
  }

  // @ts-ignore
  return (
    <div>
      <BetaSchemaForm<API.Banks>
        formRef={formRef}
        initialValues={banks}
        onCancel={() => setEditDialg(false)}
        onVisibleChange={setEditDialg}
        title="字典管理"
        visible={editDialg}
        layoutType="ModalForm"
        columns={columnDialog}
        onFinish={async (values) => {
          values.id = banks.id;
          console.log(values);
          return new Promise<Boolean>((resolve, reject) => {
            editBanks(values)
              .then(() => {
                message.success('操作成功');
                setEditDialg(false);
                // refresh ();
                resolve(true);
              })
              .catch(() => {
                message.success('操作失败');
                reject(false);
              });
          });
        }}
      />
      <MyTable<API.Banks>
        search={false}
        toolbar={() => [
          <Button
            onClick={() => {
              formRef.current?.resetFields();
              openEditDialg();
            }}
            key="button"
            icon={<PlusOutlined />}
            type="primary"
          >
            新建
          </Button>,
        ]}
        request={findByBanksPageList}
        columns={column}
      ></MyTable>
    </div>
  );
};

export default cloneTbale;
